<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>lab-manager 登录</title>
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/css/login.css">
  </head>
  <body>
      <div class="login">
          <img src="./static/img/logo.png" width="400px"/>
          <div class="login-input">
              <input id="username" class="form-control input-lg" type="text" placeholder="username"></input>
              <input id="password" class="form-control input-lg" type="password" placeholder="password"></input>
          </div>
          <div class="btnGroup">
              <a id='signIn' href="javascript:void(0);">Sign In</a>
          </div>
      </div>
      <canvas width="2560" height="1412"></canvas>
      <script src="./static/js/jquery.min.js"></script>
      <script src="./static/js/bootstrap.min.js"></script>
      <script src="./static/js/login.js"></script>
      <script>
          document.addEventListener('touchmove', function (e) {
              e.preventDefault()
          });
          var c = document.getElementsByTagName('canvas')[0],
              x = c.getContext('2d'),
              pr = window.devicePixelRatio || 1,
              w = window.innerWidth,
              h = window.innerHeight,
              f = 90,
              q,
              m = Math,
              r = 0,
              u = m.PI*2,
              v = m.cos,
              z = m.random;
          c.width = w*pr;
          c.height = h*pr;
          x.scale(pr, pr);
          x.globalAlpha = 0.6;
          function i(){
              x.clearRect(0,0,w,h);
              q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}];
              while(q[1].x<w+f) d(q[0], q[1]);
          }
          function d(i,j){
              x.beginPath();
              x.moveTo(i.x, i.y);
              x.lineTo(j.x, j.y);
              var k = j.x + (z()*2-0.25)*f,
                  n = y(j.y);
              x.lineTo(k, n);
              x.closePath();
              r-=u/-50;
              x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16);
              x.fill();
              q[0] = q[1];
              q[1] = {x:k,y:n};
          }
          function y(p){
              var t = p + (z()*2-1.1)*f;
              return (t>h||t<0) ? y(p) : t;
          }
          document.onclick = i;
          document.ontouchstart = i;
          i();
      </script>
  </body>
</html>
